<template>
  <el-container style="height: 100vh">
    <el-aside :width="isCollapse ? '64px' : '180px'" style="background:#001529;transition:width 0.2s;min-height:100vh;display:flex;flex-direction:column;justify-content:center;">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @select="handleMenuSelect"
        :collapse="isCollapse"
        background-color="#001529"
        text-color="#bfcbd9"
        active-text-color="#1890ff"
        style="border-right:0;min-height:100vh;"
      >
        <el-menu-item index="Dashboard">
          <template #title>
            <i class="el-icon-data-analysis"></i>
            <span v-if="!isCollapse">首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="User">
          <template #title>
            <i class="el-icon-user"></i>
            <span v-if="!isCollapse">用户管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Role">
          <template #title>
            <i class="el-icon-s-check"></i>
            <span v-if="!isCollapse">邀请码管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="Settings">
          <template #title>
            <i class="el-icon-setting"></i>
            <span v-if="!isCollapse">CormfUI日志管理</span>
          </template>
        </el-menu-item>
        <!-- <el-menu-item index="Profile">
          <template #title>
            <i class="el-icon-user-solid"></i>
            <span v-if="!isCollapse">个人中心</span>
          </template>
        </el-menu-item> -->
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #f0f1f2;">
        <div style="display:flex;align-items:center;">
          <button @click="isCollapse = !isCollapse" class="collapse-btn">
            <svg v-if="!isCollapse" width="24" height="24" viewBox="0 0 24 24"><g><rect x="4" y="6" width="16" height="2" rx="1" fill="#001529"/><rect x="4" y="11" width="16" height="2" rx="1" fill="#001529"/><rect x="4" y="16" width="10" height="2" rx="1" fill="#001529"/><polygon points="18,12 14,10 14,14" fill="#001529"/></g></svg>
            <svg v-else width="24" height="24" viewBox="0 0 24 24"><g><rect x="4" y="6" width="16" height="2" rx="1" fill="#001529"/><rect x="4" y="11" width="16" height="2" rx="1" fill="#001529"/><rect x="10" y="16" width="10" height="2" rx="1" fill="#001529"/><polygon points="10,12 14,10 14,14" fill="#001529"/></g></svg>
          </button>
          <span style="font-size:20px;font-weight:bold;color:#001529;">后台管理系统</span>
        </div>
        <div>
          <el-dropdown @command="handleUserMenu">
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">修改个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
            <div class="user-dropdown-trigger">
              <el-avatar size="small" style="background:#6a82fb;color:#fff;margin-right:8px;">
                {{ userInfo.username ? userInfo.username[0].toUpperCase() : 'U' }}
              </el-avatar>
              <span class="user-name">{{ userInfo.username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </el-dropdown>
        </div>
      </el-header>
      <el-main style="background:#f0f2f5;min-height:calc(100vh - 64px);padding:24px;">
        <div style="background:#fff;border-radius:8px;min-height:600px;padding:32px;box-shadow:0 2px 8px #f0f1f2;">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
  <el-dialog v-model="profileDialogVisible" title="修改个人信息" width="400px">
    <el-form :model="profileForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="profileForm.username" disabled />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="profileForm.nickname" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="profileForm.phone" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="profileForm.password" type="password" placeholder="请输入新密码" show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="profileDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitProfile">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { updateUser } from '../api/user';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();
const activeMenu = ref(route.name || 'Dashboard');
const isCollapse = ref(false);
const userInfo = ref({ username: '用户' });
if (localStorage.getItem('userInfo')) {
  try {
    userInfo.value = JSON.parse(localStorage.getItem('userInfo'));
  } catch (e) {}
}

function handleMenuSelect(index: string) {
  router.push({ name: index });
}
function logout() {
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  router.push({ name: 'Login' });
}

const profileDialogVisible = ref(false);
const profileForm = ref({
  id: '',
  username: '',
  nickname: '',
  phone: '',
  password: '',
  sex: 2,
  avatar: '',
  role: '',
  enabled: true
});
function handleUserMenu(command: string) {
  if (command === 'logout') {
    logout();
  } else if (command === 'profile') {
    // 只取允许的字段
    const u = userInfo.value;
    profileForm.value = {
      id: u.id,
      username: u.username,
      nickname: u.nickname,
      phone: u.phone,
      password: '',
      sex: u.sex ?? 2,
      avatar: u.avatar ?? '',
      role: u.role ?? '',
      enabled: u.enabled ?? true
    };
    profileDialogVisible.value = true;
  }
}
async function submitProfile() {
  try {
    const data = { ...profileForm.value };
    data.role = data.role?.toUpperCase?.() || '';
    if (!data.username || !data.password || !data.nickname || !data.phone) {
      ElMessage.error('用户名、密码、昵称、手机号均为必填');
      return;
    }
    await updateUser(data);
    ElMessage.success('保存成功');
    profileDialogVisible.value = false;
    userInfo.value.nickname = data.nickname;
    userInfo.value.phone = data.phone;
    localStorage.setItem('userInfo', JSON.stringify(userInfo.value));
  } catch (e) {
    ElMessage.error('保存失败');
  }
}
</script>

<style scoped>
.el-header {
  box-shadow: 0 2px 8px #f0f1f2;
}
.collapse-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  margin-right: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.collapse-btn:hover {
  background: #e6f7ff;
}
.el-aside {
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.el-menu {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.user-dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  transition: background 0.2s;
}
.user-dropdown-trigger:hover {
  background: #f5f6fa;
}
.user-name {
  color: #001529;
  font-size: 15px;
  margin-right: 2px;
  font-weight: 500;
}
</style> 